---
description: Компонент, который представляет собой базовую обертку для переключателей (checkbox, radio, switch).
---

<Overview group="utils">

# SelectionControl [tag:component]

Компонент, который представляет собой базовую обертку для переключателей (`checkbox`, `radio`, `switch`).
Лежит в основе таких компонентов как [`Radio`](/components/radio), [`Checkbox`](/components/checkbox) и [`Switch`](/components/switch).

</Overview>

<Playground>
  ```jsx
  <SelectionControl>
    <Checkbox.Input />
    <SelectionControl.Label>Согласен</SelectionControl.Label>
  </SelectionControl>
  ```
</Playground>

## Применение компонента

> **Обратите внимание**
>
> Если вам не нужна дополнительная стилизация или специфичное поведение, то используйте компоненты [`Radio`](/components/radio),
> [`Checkbox`](/components/checkbox) или [`Switch`](/components/switch) напрямую. Они покрывают все базовые потребности пользователя
> и стилизованы под дизайн-систему VKUI.

С помощью данного компонента можно более гибко контролировать поведение и стилизацию всех типов переключателей.
Может быть полезно, если вы хотите задать специфичную цветовую тему компонентов или изменить порядок
текстовых элементов.

## Структура

Компонент `SelectionControl` служит обёрткой для всего контента.

Подкомпонент `SelectionControl.Label` вкладывается в `SelectionControl` и используется для задания заголовка и подзаголовка переключателя.

Также в `SelectionControl` необходимо вложить нужный переключатель, для этого используйте соответствующие компоненты `Checkbox.Input`,
`Radio.Input` или `Switch`.

Переключатели и подкомпонент `SelectionControl.Label` можно располагать в любом порядке.

import { BlockWrapper } from '@/components/wrappers';

<Playground Wrapper={BlockWrapper} style={{ width: 270 }}>
  ```jsx
  <SelectionControl>
    <Checkbox.Input />
    <SelectionControl.Label titleAfter={<Icon12Lock />}>Заголовок</SelectionControl.Label>
  </SelectionControl>
  <SelectionControl>
    <Radio.Input />
    <SelectionControl.Label description="Описание">Заголовок</SelectionControl.Label>
  </SelectionControl>
  <SelectionControl>
    <SelectionControl.Label description="Описание">Заголовок</SelectionControl.Label>
    <Switch />
  </SelectionControl>
  ```
</Playground>

## Свойства и методы [#api]

<PropsTable name="SelectionControl">
### SelectionControl [#selection-control-api]

### SelectionControl.Label [#selection-control-label-api]

</PropsTable>
